/*
    * @moudule:@/views/home/analysisOrder
    * @author:zengfx
    * @date:2020-10-28
    * 存量环比分析报表
 */

<template>
  <div class="analysisOrder_container">
    <el-form :inline="true" :model="formInline" class="main_searchBar">
      <el-form-item label="月份:">
        <el-date-picker
          size="mini"
          v-model="formInline.bilMonth"
          value-format="yyyyMM"
          type="month"
          placeholder="选择月"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="区域:">
        <dx-cascader :area_id.sync="formInline.areaId" ref="cascader" />
      </el-form-item>
      <!-- <el-form-item label="客户群:">
        <el-select
          size="mini"
          v-model="formInline.indexCode"
          style="width: 100px"
        >
          <el-option
            v-for="(item, index) in customerList"
            :key="index"
            :label="item.indexName"
            :value="item.indexCode"
          ></el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item>
        <el-button size="mini" @click="serrch()" type="primary" id="search_btn">查询</el-button>
        <el-button size="mini" type="success" @click="handle_export">导出</el-button>
      </el-form-item>
    </el-form>
    <header>
      <p>存量环比分析报表</p>
    </header>
    <el-table
      size="mini"
      ref="table"
      border
      stripe
      v-loading="showTableLoading"
      :data="tableData"
      style="width: 100%"
      :height="height"
      :span-method="arraySpanMethod"
      :header-cell-style="{ background: '#F5F8FB' }"
    >
      <!--  -->
      <el-table-column width="120" prop="class10"></el-table-column>
      <el-table-column width="120" prop="class20"></el-table-column>
      <el-table-column width="120" prop="class30"></el-table-column>
      <el-table-column width="140" prop="verticalIndexName0"></el-table-column>
      <el-table-column v-for="(item, index) in titles" :key="index" align="center" :label="item.areaName">
        <el-table-column align="center" label="上月" :prop="'t0Value' + index" min-width="100"></el-table-column>
        <el-table-column align="center" label="本月" :prop="'t1Value' + index" min-width="100"></el-table-column>
        <el-table-column align="center" label="环比" :prop="'t0ont1' + index" min-width="100"></el-table-column>
        <el-table-column align="center" label="套餐数" :prop="'promCnt' + index" min-width="100"></el-table-column>
      </el-table-column>
      <!-- <el-table-column
        class-name="right-money"
        v-for="(item, index) in titleList"
        min-width="84"
        :key="index"
        :label="item"
        :prop="item"
      >
        <el-table-column align="center" label="上月" width="140">
          <template slot-scope="scope">
            <span class="num" style="cursor: pointer">{{
              scope.row.t0Value
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="本月" width="140">
          <template slot-scope="scope">
            <span class="num" style="cursor: pointer">{{
              scope.row.t1Value
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="环比" width="140">
          <template slot-scope="scope">
            <span class="num" style="cursor: pointer">{{
              scope.row.t0ont1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="套餐数" width="140">
          <template slot-scope="scope">
            <span class="num" style="cursor: pointer">{{
              scope.row.promCnt
            }}</span>
          </template>
        </el-table-column>
      </el-table-column>-->
    </el-table>
  </div>
</template>

<script>
import qs from "qs";
import { getCookie, setCookie } from "@/common/js/cookie";
import prefixAPI from "@/api/prefixAPI"; // prefixAPI 前缀
const url = prefixAPI.pack;
import { $budgetAPI, $budget } from "@/api";
import {
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
} from "@/common/js/storage";

export default {
  data() {
    return {
      formInline: {
        areaId: "",
        bilMonth: "",
        // indexCode: "全量",
      },
      pickerOptions: this.pickerDisabled(),
      disabledTime: "",
      showTableLoading: false,
      tableData: [],
      customerList: [
        {
          indexName: "全量",
          indexCode: "全量",
        },
        {
          indexName: "政企客户部",
          indexCode: "政企客户部",
        },
        {
          indexName: "公众客户群0-3星",
          indexCode: "公众客户群0-3星",
        },
        {
          indexName: "公众客户群4-7星",
          indexCode: "公众客户群4-7星",
        },
      ],
      titleList: [],
      spanArr: [],
      titles: [],
      height: window.innerHeight - 60 - 30 - 140,
    };
  },
  methods: {
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.tableData.length > 0) {
        if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
          return this.spanArr && this.spanArr[rowIndex][columnIndex];
        }
      }
    },
    handle_export() {
      const { formInline } = this;
      var params = {
        ...formInline,
        token: getCookie("token"),
      };
      window.open(
        `${url}/incomeView/getInventoryReportExport?${qs.stringify(params)}`,
        "_self"
      );
    },
    getHeight() {
      this.height = window.innerHeight - 60 - 30 - 140;
    },
    getMonth() {
      var that = this;
      return new Promise((resolve) => {
        $budgetAPI.incomeKeepRegionalMonth(
          { maximum: 3 },
          (res) => {
            if (res.code == 0) {
              resolve(res.content);
            }
          },
          (err) => {
            console.log(err);
          }
        );
      });
    },
    pickerDisabled() {
      let self = this;
      return {
        disabledDate(time) {
          if (self.disabledTime) {
            var timeyear = time.getFullYear();
            var timemonth = time.getMonth() + 1;
            if (timemonth >= 1 && timemonth <= 9) {
              timemonth = "0" + timemonth;
            }
            var currentdate = timeyear.toString() + timemonth.toString();
            if (currentdate > self.disabledTime) {
              return true;
            }
          }
        },
      };
    },
    async initData() {
      var that = this,
        month,
        customer,
        obj = {};
      month = await that.getMonth();
      // customer = await that.getCustomerGroup();
      // that.customerList = customer;

      that.formInline.bilMonth = month;
      that.disabledTime = month;
      that.formInline.customer = undefined;
      that.getInitList();
    },
    // 初始化列表接口
    getInitList() {
      var that = this;
      // 接口
      //   this.formInline.bilMonth = "202008";
      //   this.formInline.areaId = "5";
      this.showTableLoading = true;
      $budgetAPI.inventoryReport(
        this.formInline,
        (res) => {
          if (res.code == 0) {
            if (res.content.data && res.content.data.length > 0) {
              that.tableData = [];
              that.titles = [];
              // this.tableData = res.content.data[2].list;
              // this.titleList = res.content.data[2].titleList;

              var dlist = [];
              var list = [];
              var data = [];

              res.content.data.map((it) => {
                if (it.titleList) {
                  dlist.push(it);
                  data = it.list;
                }
              });

              if (data.length) {
                for (var k = 0; k < data.length; k++) {
                  var obj = {};
                  list.push(obj);
                }
                dlist.map((it) => {
                  var obj = {
                    areaName: it.areaName,
                  };
                  that.titles.push(obj);
                });
                for (var i = 0; i < dlist.length; i++) {
                  for (let j = 0; j < data.length; j++) {
                    list[j]["areaId" + i] = dlist[i].list[j].areaId;
                    list[j]["areaName" + i] = dlist[i].list[j].areaName;
                    list[j]["bilMonth" + i] = dlist[i].list[j].bilMonth;
                    list[j]["busiCode" + i] = dlist[i].list[j].busiCode;

                    list[j]["class1" + i] = dlist[i].list[j].class1;
                    list[j]["class2" + i] = dlist[i].list[j].class2;
                    list[j]["class3" + i] = dlist[i].list[j].class3;

                    list[j]["indexCode" + i] = dlist[i].list[j].indexCode;
                    list[j]["promCnt" + i] = dlist[i].list[j].promCnt;
                    list[j]["sumBusiCode" + i] = dlist[i].list[j].sumBusiCode;

                    list[j]["t0Value" + i] = dlist[i].list[j].t0Value;
                    list[j]["t0ont1" + i] = dlist[i].list[j].t0ont1;
                    list[j]["t1Value" + i] = dlist[i].list[j].t1Value;
                    list[j]["verticalIndexName" + i] =
                      dlist[i].list[j].verticalIndexName;
                  }
                }
                console.log("list", list);
                this.tableData = list;
                this.spanArr = this.mergeSpan(this.tableData, [
                  "class10",
                  "class20",
                  "class30",
                ]);
              } else {
                this.tableData = [];
              }
            }
            this.showTableLoading = false;
          }
        },
        (err) => {
          this.showTableLoading = false;
        }
      );
    },
    getCustomerGroup() {
      var that = this;
      return new Promise((resolve) => {
        $budgetAPI.getCustomerGroup(
          {},
          (res) => {
            if (res && res.code == 0) {
              resolve(res.content);
            }
          },
          (err) => {}
        );
      });
    },
    mergeSpan(tableData, arr) {
      let spanArr = new Array(tableData.length);
      for (let m = 0; m < spanArr.length; m++) {
        spanArr[m] = new Array(arr.length);
      }
      arr.forEach((ele, ind) => {
        let pos = null;
        tableData.forEach((item, index, self) => {
          if (index == 0) {
            spanArr[index][ind] = {
              rowspan: 1,
              colspan: 1,
            };
            pos = 0;
          } else {
            if (item[ele] === self[index - 1][ele]) {
              spanArr[pos][ind].rowspan += 1;
              spanArr[index][ind] = {
                rowspan: 0,
                colspan: 0,
              };
            } else {
              pos = index;
              spanArr[index][ind] = {
                rowspan: 1,
                colspan: 1,
              };
            }
          }
        });
      });

      return spanArr;
    },
    serrch() {
      this.getInitList();
    },
  },
  created() {
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.formInline.areaId = this.accountInfo.areaId;
    this.initData();
    window.addEventListener("resize", this.getHeight);
  },
  destroyed() {
    // 计算高度
    window.removeEventListener("resize", this.getHeight);
  },
};
</script>

<style lang="scss" scoped>
.analysisOrder_container {
  width: 100%;
  height: 100%;
  & > header {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
</style>